<template>
	<view class="padding-top">
		<view class="card text-center" v-if="company">
			<view class="text-lg margin-tb">诚挚邀请您加入</view>
			<u-avatar class="margin-tb" :src="company.picture" size="150"></u-avatar>
			<view class="text-xl text-bold margin-tb">【{{company.company_name}}】</view>
			<view class="text-gray margin-tb">加入后立即获得一张电子企业名片</view>
			<view class="padding-tb-xl">
				<my-btn width="440" v-if="type == 'send'" @click="popShow = true">立即邀请</my-btn>
				<my-btn width="440" v-if="type == 'receive'" @click="joinCompany">我要加入</my-btn>
			</view>
		</view>
    
    <!-- 分享信息 -->
    <u-popup v-model="popShow" mode="center" border-radius="16">
      <view class="padding">
        <textarea class="edit" v-model="shareMsg" placeholder="" />
        <view class="padding-top">
          <my-btn width="370" open-type="share" @click="popShow = false">立即发送</my-btn>
        </view>
      </view>
    </u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				id: '',
				company: '',
        popShow: false,
        shareMsg: ''
			};
		},
		onShareAppMessage() {
			return {
				title: this.shareMsg,
				path: `/pages/enterprise/invitation?id=${this.id}&type=receive`,
        imageUrl: this.company.picture
			}
		},
		onLoad(opt) {
			this.type = opt.type
			this.id = opt.id
			this.getDetail()
		},
		onShow() {
			if (!this.$store.state.token) {
				this.$goto('/pages/other/loading')
			} else {
				this.getDetail()
			}
		},
		methods: {
			async getDetail() {
				let { company } = await this.$u.api.getCompanyDetail(this.id)
				this.company = company
        this.shareMsg = `邀请你加入【${company.company_name}】公司`
			},
			async joinCompany() {
				let params = {
					company_id: this.id
				}
				let res = await this.$u.post('/company/join', params)
				let { msg } = res.data
				this.$msg(msg)
			}
		}
	}
</script>

<style lang="scss">
	.card {
		width: 670rpx;
		margin: 0 auto;
		padding: 32rpx;
		min-height: 80vh;
		background: #fff;
		box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(0, 0, 0, 0.17);
	}
  
  .edit {
    height: 200rpx;
    padding: 16rpx;
    border-radius: 8rpx;
    border: 1px solid rgba(0,0,0,0.1);
  }
</style>
